<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="username">
    <input type="text" id="age">
    <button id="btn">确定</button>
    <button id="del">删除</button>
    <button id="update">修改</button>
</body>
<script>
    window.onload = function() {
        const btn = document.getElementById("btn");
        btn.addEventListener('click', () => {
            let username = document.getElementById('username').value;
                age = document.getElementById('age').value
            let data = localStorage.getItem('data')
            if(data == null) {
                data = [
                    {
                        username:username,
                        age:age
                    },
                ]
            } else {
                data = JSON.parse(data)
                data.push({
                    username:username,
                    age:age,
                })
            }
            localStorage.setItem('data', JSON.stringify(data))
        })
        del.addEventListener('click', () => {
            let data = localStorage.getItem('data')
            data = JSON.parse(data)
            data.splice(2, 1, {
                username:'自理增加',
                age:1,
            })
            localStorage.setItem('data', JSON.stringify(data))
        })

        update.addEventListener('click', () => {
            let data = localStorage.getItem('data')
            data = JSON.parse(data)
            data[2].age = 666
            localStorage.setItem('data', JSON.stringify(data))
        })
    }
    
    // localStorage.setItem('username' , '张三')
    // localStorage.setItem('age' , 18)

    // let arr = {
    //     username : '王五',
    //     age: 20,
    // }
    // localStorage.setItem('def', JSON.stringify(arr))
    // console.log(JSON.parse(localStorage.getItem('sef')));
</script>
</html>